const webpack = require('webpack');
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');

const devConfig = {
  // 打包模式(默认为production, 压缩代码), development模式下代码不会被压缩
  mode: 'development',
  // source-map是一种映射关系, 当代码出错的时候, 可以直接定位到源代码, 线上(production环境, 推荐用 cheap-module-source-map)
  devtool: 'cheap-module-eval-source-map',
  // webpack 内置的server, 也可以用 webpack-dev-middleware结合express
  // 它打包生成的文件不会放到dist目录下, 而是存在内存中, 有效提升打包速度
  module: {
    rules: [
      {
        // loader执行顺序 从下到上, 从右到左
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // 保证无论在less文件还是js文件里import的样式文件, 都要重新走一遍从下往上的流程
              importLoaders: 2,
              // 开启css模块化打包
              // modules: true
            }
          },
          'less-loader',
          {
            // 添加浏览器厂商前缀
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')
              ]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        // webpack 和 babel 做了打通, 实际得用@babel/preset-env来做语法转换
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          // eslint-loader 会降低打包的速度
          'eslint-loader'
        ]
      }
    ]
  },
  devServer: {
    // 配合eslint使用, 将报错信息在浏览器中以弹窗层显示
    overlay: true,
    // 在哪个文件夹下去启动服务器
    contentBase: './dist',
    // 启动服务时 自动打开浏览器
    // open: true,
    port: 8181,
    // 访问任何一个路径, 都返回index.html
    historyApiFallback: true,
    // 当访问/api/header.json时, 会请求到 http://localhost:3000/
    proxy: {
      '/api': {
        target: 'http://localhost:3000/',
        // 当访问/api/header.json时, 会请求到 http://localhost:3000/demo.json
        pathRewrite: {
          'header.json': 'demo.json'
        }
      }
    },
    // 开启hot module replacement的功能
    hot: true,
    // 即使hmr功能不生效, 浏览器也不自动刷新
    // hotOnly: true
  },
  output: {
     // 指定打包好的文件名
     filename: 'bundle.js',
     chunkFilename: '[name].chunk.js',
  },
  // plugins 可以在webpack运行到某一刻的时候, 帮你做一些事情, 类似于生命周期函数
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

// modulue.exports 遵循的是CommonJS的模式
module.exports = merge(commonConfig, devConfig);